<#include "../header.ftl" />
<@head title="修改个人头像" />
		<@side.sidenav active="修改个人头像"/>
	    <div class="g-content">
	        <div class="g-content-container">
	            <div class="g-p">
					<div class="m-crumb">
					    <ul class="f-cb">
					        <li><i>&gt;</i><a href="#">博客管理</a></li>
					        <li><i>&gt;</i><a href="#">修改个人头像</a></li>
					    </ul>
					</div>
					<div class="page-title">
						<h1>修改个人头像</h1>
					</div>
					<div class="m-content">
						<form id="avatarForm" name="avatarForm" action="${spaceUrl}/admin/user/avatar/upload" method="POST" enctype="multipart/form-data">
							<input type="file" name="avatar" />
							<input type="submit" class="button" id="btnUpload" value="上传图像"/>
						</form>
						<form id="avatarCropForm" name="avatarCropForm" action="${spaceUrl}/admin/user/avatar/cut" method="POST">
							<img src="${base}/images/nophoto.gif" id="cropImage" /> <br/>
							<input type="button" class="button" value="修改头像" onclick="cut()"/>
							
							<input type="hidden" name="file" id="file"/>
							<input type="hidden" size="4" id="x1" name="x1" />
							<input type="hidden" size="4" id="y1" name="y1" />
							<input type="hidden" size="4" id="x2" name="x2" />
							<input type="hidden" size="4" id="y2" name="y2" />
						</form>
					</div>
	            </div>
	        </div>
	    </div>
	    <link rel="stylesheet" type="text/css" href="${base}/script/jquery-jcrop/jquery.Jcrop.min.css">
		<script type="text/javascript" src="${base}/script/jquery-jcrop/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="${base}/script/jquery.form.js"></script>
		<script type="text/javascript">
			function cut(){
				if(!document.getElementById('file').value){
					alert('请先上传图片');
					return;
				}
				var x1 = document.getElementById("x1").value;
				var y1 = document.getElementById("y1").value;
				var x2 = document.getElementById("x2").value;
				var y2 = document.getElementById("y2").value;
				if(x1 && x2 && y1 && y2){
					document.getElementById("avatarCropForm").submit();
				}
				else{
					alert('请先正确选择要裁剪的区域');
				}
			}
			$(document).ready(function(){
		    	$("#avatarForm").ajaxForm({
		    		success: function(response){
		    			if(response.success === true){
		    				//$('#btnUpload').css('display', 'none');
		    				
		    				$('#cropImage').attr('src', response.data.url);
		    				$('#file').val(response.data.url);
		    				
		    				//可裁剪
					    	$('#cropImage').Jcrop({
					    		onChange: function(c){
						    		$('#x1').val(c.x);
								    $('#y1').val(c.y);
								    $('#x2').val(c.x2);
								    $('#y2').val(c.y2);
					    		},
					    		onSelect: function(c){
					    			$('#x1').val(c.x);
								    $('#y1').val(c.y);
								    $('#x2').val(c.x2);
								    $('#y2').val(c.y2);
					    		},
					    		onRelease: function(){
					    			$('#x1').val('');
								    $('#y1').val('');
								    $('#x2').val('');
								    $('#y2').val('');
					    		}
					    	});
		    			}
		    			else{
		    				alert('图像上传失败');
		    			}
		    		}
		    	});
			});
		</script>
<#include "../footer.ftl" />